import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {Link, History} from 'react-router';

import * as Util from '../../common/Util';
import {
  Grid,
  Row,
  Col,
  Input,
  Button,
  Alert,
  Navbar,
  Nav,
  NavItem
} from 'react-bootstrap';

import Notify from '../../common/Notification';
import Ticket from '../../components/Ticket';
import Container from '../../components/Container';

import * as TicketActions from '../../actions/TicketActions';
import * as WxUpgradeActions from '../../actions/WxUpgradeActions';

class WxUpgradeApp extends React.Component {

  constructor () {
    super();   

    this.state = {
      phone : ""
    };
  }

  static propTypes = {
    dispatch: React.PropTypes.func.isRequired
  }

  handleSubmitClick() {

    let phone = this.refs.phone.getValue();
    if(!Util.phoneValidate(phone)){
      Notify.makeNotify("手机号码格式不正确");
      return;
    }

    let captcha = this.refs.captcha.getValue();
    if(!Util.captchaValidate(captcha)){
      Notify.makeNotify("验证码格式不正确");
      return;
    }

    this.props.wxupgradeAction.wxupgrade({phone, captcha});

  }

  componentDidUpdate(){
    let { wxupgrade_status = 0, message = "" } = this.props.wxupgrade;
    if (wxupgrade_status === 1) {
       this.props.history.pushState(null, '/WxUpgrade2');
    }
  }

  handlePhoneChange(e){
    let phoneNum = e.target.value;
    
    this.setState({
      phone : phoneNum
    });
  }

  renderTicketLink(){
    return(
      <Ticket phone={this.state.phone} action={this.props.ticketAction}/>
    )
  }

  render() {

    return (
      <Container  
        isGoBack={true} 
        isFooter={false}
        isHeader={true} 
        isAuth = {false}
        headerTitle={"资料补充"}>
        
         <div className="blank30"></div>
          <div id="account-panel">

              <form className="form-horizontal">
                <div className="form-element">
                  <Input type="tel" 
                    ref = "phone"
                    defaultValue = ""
                    placeholder = "请输入手机号码"
                    maxLength = "11"
                    wrapperClassName="col-xs-12" 
                    onChange={ this.handlePhoneChange.bind(this) }
                    addonBefore="手机号"/>
                  <div className="devider"></div>
                  <Input type="tel" 
                    ref = "captcha"
                    defaultValue=""
                    maxLength = "6"
                    placeholder = "请输入验证码" 
                    wrapperClassName="col-xs-12"
                    addonAfter = {this.renderTicketLink()}
                    addonBefore="验证码"/>
                </div>

                <div className="text-center padding-left-lg padding-right-lg">
                  <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>登录</Button>  
                </div>

              </form>

          </div>
                 
      </Container>
    );
  }
}

export default connect(state => ({
    wxupgrade : state.wxupgrade
}), dispatch => ({
    wxupgradeAction: bindActionCreators(WxUpgradeActions, dispatch),
    ticketAction: bindActionCreators(TicketActions, dispatch)
}))(WxUpgradeApp);
